<template>
	<view class="clientInfo_container">
		<z-paging ref="paging" v-model="listData" @query="queryReserveOrderPageByPlatformsApp">
			<template #top>
				<v-tabs class="mb15" v-model="tabCurrent" bgColor="transparent" :scroll="false" activeColor="#333333"
					fontSize="34rpx" :bold="true" lineColor="#33bf8d" lineHeight="6rpx" lineScale="0.3" :tabs="list"
					@change="tabChange()"></v-tabs>
			</template>

			<view class="content">
				<view class="d-flex flex-column content_item w100p mb15" v-for="item in listData" :key="item.orderCode"
					@click="goDetailPage(item)">
					<view class="d-flex a-center mb15">
						<view class="line mr10"></view>
						<view class="title">{{item.reserveCode}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15">
						<view class="title_item">所属客户</view>
						<view class="value_item">{{item.customerName || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb mb15">
						<view class="title_item">预约时间</view>
						<view class="value_item">{{item.reserveDate || praseStrEmpty}}</view>
					</view>
					<view class="d-flex a-center j-sb">
						<view class="title_item">进行状态</view>
						<view class="value_item">
							<u-tag plain size="mini" :text="item.isReply==0?'未回复':'已回复'" :type="item.isReply==0?'error':'success'"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		queryReserveOrderPageByPlatformsApp
	} from "@/api/index.js"

	export default {
		components: {},
		data() {
			return {
				userInfo: uni.getStorageSync('housekeeperInfo'),
				tabCurrent: 0,
				list: ["未回复", "已回复"],
				listData: [],
			};
		},
		onLoad() {},
		onShow() {
			let isReload = uni.getStorageSync('isReload')
			if(isReload == '1') {
				console.log('执行了');
				this.$refs.paging.reload()
			}
			uni.setStorageSync('isReload', '0')
		},
		methods: {
			queryReserveOrderPageByPlatformsApp(pageNo, pageSize) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				queryReserveOrderPageByPlatformsApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					housekeeperCode: this.userInfo.housekeeperCode,
					isReply: this.tabCurrent,
				}).then(res => {
					// this.listData = res.object.data
					this.$refs.paging.complete(res.object.data);
					uni.hideLoading()
				})
			},

			goDetailPage(val) {
				uni.navigateTo({
					url: "/pages/makeAnAppointment/details?orderCode=" + val.orderCode
				})
			},

			tabChange(val) {
				this.tabCurrent = val
				this.$refs.paging.reload()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.clientInfo_container {

		min-height: 100vh;
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			box-sizing: border-box;
			padding: 0rpx 28rpx;
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #fff;
				padding: 40rpx;

				.title {
					color: #333333;
					font-size: 34rpx;
					font-weight: 600;
				}

				.line {
					width: 12rpx;
					height: 34rpx;
					background: #38d19a;
					border-radius: 3px;
				}

				.title_item {
					font-size: 28rpx;
					color: #333333;
					font-weight: 400;
				}

				.value_item {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
</style>